<template>
    <div id="myMain">
        <div class="myMain-padding picture-main displayFlexR">
            <div class="left boxShadow paddingSize">
                <p class="baseBG" style="padding: 10px;">全部表数据</p>
                <el-tree
                :highlight-current="true"
                :data="treeData"
                :props="defaultProps"
                accordion
                node-key="id"
                :default-expanded-keys="[1]"
                :current-node-key="2"
                :expand-on-click-node="false"
                :default-expand-all="true"
                @node-click="classification">
                <span class="custom-tree-node" slot-scope="{ data }" style="width: 100%;line-height: 20px;">
                    <span>{{ data.name }}</span>
                    <!-- <span @click="classification(data)">{{ data.name }}</span>
                    <span v-if="data.children" class="fr">
                    </span> -->
                </span>
                </el-tree>
            </div>
            <div class="right paddingSize displayFlexC">
                <tableTemplate ref="table"></tableTemplate>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import '../../styles/all.scss';
::v-deep.vxe-form .vxe-form--item:last-of-type{
  margin: 0 auto;
    display: flow-root;
}
#myMain{
    .picture-main{
        flex: 1;
        .left{
            width: 200px;
            p:nth-of-type(1){
                text-align: center;
                border-radius: 5px;
                margin: 0 0 20px 0;
            }
        }
        .right{
            width: calc(100% - 200px);
            flex: 1;
        }
    }
}
</style>
<script>
import { getFormClassification } from '@/api/Data_filling'
import tableTemplate from '@/viewsF/Data_filling/tableTemplate.vue'
export default {
    props: {
    },
    components:{
        tableTemplate
    },
    data(){
        return{
            // 树形控件
            treeData: [],
            defaultProps: {
                children: 'children',
                name: 'name'
            },
            activeName: '固定资产明细表',
            
        }
    },
    watch:{
    },
    methods:{
        // get form classification
        getForm(){
            getFormClassification().then(res => {
                console.log("form classification", res)
                this.treeData = res.data
            })
        },
        // 根据分类筛选表内容
        classification(rowData){
            this.activeName = rowData.name
            console.log('row data', rowData)
            if(rowData.fatherId == null){
                // 一级
                this.$XModal.message({ message: '请选择二级表名！', status: 'info' })
            }else{
                // 二级
                this.activeVal = rowData
                this.$refs.table.getData(rowData.id)
            }
        },
        
    },
    created(){},
    mounted(){
        this.getForm()
        this.$refs.table.getData(2)
    },
}
</script>